<template>
	<div id='index'>
		<div class="index_header">
			<div class="header_left">
				<el-tooltip v-show='isCollapse' class="item" effect="light" content="打开菜单" placement="bottom">
					<i @click="isCollapse=false" class="el-icon-s-unfold"></i>
				</el-tooltip>
				<el-tooltip v-show='!isCollapse' class="item" effect="light" content="收缩菜单" placement="bottom">
					<i @click="isCollapse=true" class="el-icon-s-fold"></i>
				</el-tooltip>

				<img class="header_icon" src="../../assets/logo_npn.png" alt="" />
			</div>
			<div class="header_cion">
				<el-tooltip class="item" effect="light" content="Fix Blank" placement="bottom">
					<i class="el-icon-refresh"></i>
				</el-tooltip>
				<el-tooltip class="item" effect="light" content="Help" placement="bottom">
					<i class="el-icon-help"></i>
				</el-tooltip>
				<el-tooltip class="item" effect="light" content="Change Password" placement="bottom">
					<i class="el-icon-edit-outline"></i>
				</el-tooltip>
				<!--<el-tooltip   class="item" effect="light" content="" placement="bottom">-->
				<i class="el-icon-user-solid"></i>
				<!--</el-tooltip>-->
				<el-tooltip class="item" effect="light" content="Log Out" placement="bottom">
					<i class=" el-icon-setting"></i>
				</el-tooltip>
			</div>
		</div>
		<div class="header_kong"></div>
		<div class="index_bottom_f" :style="contentHeight">
			<div class="flex_f_1" :style="contentHeight">
				<div class="index_nav">
					<el-menu background-color='#f7f7f9' default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span slot="title">导航一</span>
							</template>
							<el-menu-item-group>
								<span slot="title">分组一</span>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="1-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="1-4">
								<span slot="title">选项4</span>
								<el-menu-item index="1-4-1">选项1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span slot="title">导航二</span>
						</el-menu-item>
						<el-menu-item index="3" disabled>
							<i class="el-icon-document"></i>
							<span slot="title">导航三</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">导航四</span>
						</el-menu-item>
					</el-menu>
				</div>
			</div>
			<div class="flex_f_2" >
				<div class="index_content_f" ref='indexContentFreF'>
					<div class="index_content" :class="navTtile?'index_content_hover':''">
						<router-view/>
					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				isCollapse: false,//true表示关闭，false表示打开
				navTtile: true,
				contentHeight: {
					height: '400px'
				}
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			this.contentHeight = {
				height: `${window.innerHeight - 60}px`
			}
			window.onresize = () => {
				if((window.innerHeight - 60) > 500) {
					this.contentHeight = {
						height: `${window.innerHeight - 60}px`
					}
				} else {
					this.contentHeight = {
						height: `500px`
					}
				}
				
				this.$nextTick(()=>{
					if(window.innerWidth<1200){
						this.isCollapse = true ; 
					}
					this.$store.commit('getSearchContentHeight',{
						height:this.$refs.indexContentFreF.clientHeight-50,
					})
					
					this.$store.commit('getContentHeight',{
						height:this.$refs.indexContentFreF.clientHeight,
					})
					
					this.$store.commit('getTableHeight',{
						height:this.$store.state.searchContentHeight - this.$store.state.searchHeight
					});
					console.log(this.$store.state.tableHeight)
				})
				
				
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	@import './index.scss';
</style>